<template>
	<div class="trade-floor">
		<div class="tf-header" id="home">
			<canvas id="canvas" class="canvas"></canvas>
			<div class="tf-c">
				<p class="tfh-title">我的{{list.stocks_name}}价值</p>
				<p class="tfh-money">￥<span>{{list.stocks_money}}</span></p>
				<p class="tfh-btn">转出</p>
				<p class="tfh-tip">我的{{list.stocks_name}}价值=今日{{list.stocks_name}}价格 X 我的{{list.stocks_name}}数量</p>
			</div>			
		</div>
		<div class="tf-money">
			<div class="tfm-left">
				<p>我的{{jifenbao_name}}<span class="exchange-value">{{list.jifenbao}}</span>{{unit}}</p>
			</div>
			<div class="tfm-right">
				<p>兑换{{list.stocks_name}}</p>
			</div>
		</div>
		<div class="tf-price">
			<div class="tfp-item">
				<p>￥<span>{{list.stocks_price}}</span></p>
				<label>今日{{list.stocks_name}}价格({{list.stocks_unit}})</label>
				<div class="tfpi-box">
					<p>涨幅+{{present.stocks_today_increase_percent}}%</p>
					<span></span>
				</div>
			</div>
			<div class="tfp-item">
				<p><span>{{list.stocks_num}}</span></p>
				<label>我的{{list.stocks_name}}数量</label>
			</div>
		</div>
		<div class="tf-echart">
			<div id="main" style="width: 100%;height:250px;"></div>
		</div>
		<div class="tf-ask">
			<h1>{{list.stocks_name}}问答</h1>
			<div class="tf-text" 
			v-html="list.stocks_content"></div>
		</div>
	</div>
</template>
<script>
	import { Toast } from 'mint-ui'
	import axios from 'axios'
	import echarts from 'echarts'
	import Http from '../http.js'
	export default{
		data(){
			return{
				jifenbao_name: window.localStorage.getItem("jifenbao_name"),
				unit: window.localStorage.getItem("unit"),
				list: [],
				present: []
			}
		},
		mounted(){
			var canvas = document.querySelector('canvas'),
			ctx = canvas.getContext('2d')
			canvas.width = document.getElementById('home').offsetWidth;
			canvas.height = document.getElementById('home').offsetHeight;
			ctx.lineWidth = .3;
			ctx.strokeStyle = (new Color(150)).style;

			// var mousePosition = {
			// 	x: 30 * canvas.width / 100,
			// 	y: 30 * canvas.height / 100
			// };
			var mousePosition = {
				x:  canvas.width - 100,
				y:  canvas.height - 60
			};

			var dots = {
				nb: 40,
				distance: 80,
				d_radius: 800,
				array: []
			};

			function colorValue(min) {
				return Math.floor(Math.random() * 255 + min);
			}

			function createColorStyle(r,g,b) {
				return 'rgba(' + r + ',' + g + ',' + b + ', 0.8)';
			}

			function mixComponents(comp1, weight1, comp2, weight2) {
				return (comp1 * weight1 + comp2 * weight2) / (weight1 + weight2);
			}

			function averageColorStyles(dot1, dot2) {
				var color1 = dot1.color,
				color2 = dot2.color;

				var r = mixComponents(color1.r, dot1.radius, color2.r, dot2.radius),
				g = mixComponents(color1.g, dot1.radius, color2.g, dot2.radius),
				b = mixComponents(color1.b, dot1.radius, color2.b, dot2.radius);
				return createColorStyle(Math.floor(r), Math.floor(g), Math.floor(b));
			}

			function Color(min) {
				min = min || 0;
				this.r = colorValue(min);
				this.g = colorValue(min);
				this.b = colorValue(min);
				this.style = createColorStyle(this.r, this.g, this.b);
			}

			function Dot(){
				this.x = Math.random() * canvas.width;
				this.y = Math.random() * canvas.height;

				this.vx = -.5 + Math.random();
				this.vy = -.5 + Math.random();

				this.radius = Math.random() * 2;

				this.color = new Color();
			}

			Dot.prototype = {
				draw: function(){
					ctx.beginPath();
					ctx.fillStyle = this.color.style;
					ctx.arc(this.x, this.y, this.radius, 0, Math.PI * 2, false);
					ctx.fill();
				}
			};

			function createDots(){
				for(var i = 0; i < dots.nb; i++){
					dots.array.push(new Dot());
				}
			}

			function moveDots() {
				for(var i = 0; i < dots.nb; i++){

					var dot = dots.array[i];

					if(dot.y < 0 || dot.y > canvas.height){
						dot.vx = dot.vx;
						dot.vy = - dot.vy;
					}
					else if(dot.x < 0 || dot.x > canvas.width){
						dot.vx = - dot.vx;
						dot.vy = dot.vy;
					}
					dot.x += dot.vx;
					dot.y += dot.vy;
				}
			}

			function connectDots() {
				for(var i = 0; i < dots.nb; i++){
					for(var j = 0; j < dots.nb; j++){
						var i_dot = dots.array[i];
						var j_dot = dots.array[j];

						if((i_dot.x - j_dot.x) < dots.distance && (i_dot.y - j_dot.y) < dots.distance && (i_dot.x - j_dot.x) > - dots.distance && (i_dot.y - j_dot.y) > - dots.distance){
							if((i_dot.x - mousePosition.x) < dots.d_radius && (i_dot.y - mousePosition.y) < dots.d_radius && (i_dot.x - mousePosition.x) > - dots.d_radius && (i_dot.y - mousePosition.y) > - dots.d_radius){
								ctx.beginPath();
								ctx.strokeStyle = averageColorStyles(i_dot, j_dot);
								ctx.moveTo(i_dot.x, i_dot.y);
								ctx.lineTo(j_dot.x, j_dot.y);
								ctx.stroke();
								ctx.closePath();
							}
						}
					}
				}
			}

			function drawDots() {
				for(var i = 0; i < dots.nb; i++){
					var dot = dots.array[i];
					dot.draw();
				}
			}

			function animateDots() {
				ctx.clearRect(0, 0, canvas.width, canvas.height);
				moveDots();
				connectDots();
				drawDots();

				requestAnimationFrame(animateDots);	
			}

			//----------------------跟着鼠标动--------------------
			document.getElementById('home').addEventListener('mousemove', function(e){
				mousePosition.x = e.pageX;
				mousePosition.y = e.pageY;
			});

			document.getElementById('home').addEventListener('mouseleave', function(e){
				mousePosition.x = canvas.width / 2;
				mousePosition.y = canvas.height / 2;
			});
			//----------------------跟着鼠标动--------------------

			createDots();
			requestAnimationFrame(animateDots);

			axios.post(Http.STOCKSINDEX).then( res => {
				var ret = res.data;
				if (ret.code == 1) {
					this.list = ret.data;
					this.present = ret.data.list;
				}
				var myChart = echarts.init(document.getElementById('main'));

		        // 指定图表的配置项和数据
		        var date = this.present.date;
		        var data = this.present.value;
		        var option = {
		            title: {
		                left: 'center',
	        			text: this.list.stocks_name + '价格走势',
	        			textStyle: {
				            color: '#d83604'
				        }	        			
		            },
		            tooltip: {
				        trigger: 'axis',
				        position: function (pt) {
				            return [pt[0], '10%'];
				        },
				        formatter:function(params) {             
				        	var relVal = params[0].name;             
				        	for (var i = 0, l = params.length; i < l; i++) {                  
				        		relVal += '<br/>' + params[i].seriesName + ' : ' + '<br/>'+ params[i].value+"元/个";              
				        	}             
				        	return relVal;          
				        },
				        backgroundColor: '#ff6536',
				        textStyle: {
				        	width: '250px',
				        	height: '150px',
				            color: '#fff'
				        },
				        extraCssText: 'text-align: left;'
				    },
				    xAxis: {
				        type: 'category',
				        boundaryGap: false,
				        data: date
				    },
				    yAxis: {
				        type: 'value',
				        boundaryGap: [0, '100%'],
				    },
				    dataZoom: [{
				        type: 'inside',
				        start: 0,
				        end: 50
				    }, {
				        start: 0,
				        end: 50,
				        handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
				        handleSize: '80%',
				        handleStyle: {
				            color: '#fff',
				            shadowBlur: 3,
				            shadowColor: 'rgba(0, 0, 0, 0.6)',
				            shadowOffsetX: 2,
				            shadowOffsetY: 2
				        }
				    }],
				    series: [
				        {
				            name:'参考币价',
				            type:'line',
				            smooth:true,
				            symbol: 'emptyCircle',
				            symbolSize: '4',
				            showSymbol: false,
				            sampling: 'average',
				            itemStyle: {
				                color: 'rgb(255, 70, 131)'
				            },
				            areaStyle: {
				                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
				                    offset: 0,
				                    color: 'rgb(255, 158, 68)'
				                }, {
				                    offset: 1,
				                    color: 'rgb(255, 70, 131)'
				                }])
				            },
				            data: data
				        }
				    ]
		        };

		        myChart.setOption(option);
			})			
		},
	}
</script>
<style lang="scss" scoped>
	.trade-floor{
		.tf-header{
			position: relative;
			overflow-x: hidden;
			width: 100%;
			height: 160px;
			color: #333;
			.canvas{
				width: 100%;
			}
			.tf-c{
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				padding-top: 0.4rem;
				text-align: center;
				background: rgba(256,256,256,0.4);
				.tfh-title{
					font-size: 0.20rem;
					margin-bottom: 0.20rem;
				}
				.tfh-money{
					margin-bottom: 0.3rem;
					font-size: 0.20rem;
					span{
						font-size: 0.44rem;
						font-weight: bold;
					}
				}
				.tfh-btn{
					margin-bottom: 0.2rem;
					margin-left: 35%;
					width: 30%;
					height: 0.66rem;
					line-height: 0.66rem;
					text-align: center;
					border-radius: 0.66rem;
					background: #d83604;
					color: #fff;
					font-size: 0.28rem;
				}
				.tfh-tip{
					font-size: 0.20rem;
					color: #999;
				}
			}			
		}
		.tf-money{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin: 0 4%;
			padding: 0 4%;
			width: 84%;
			height: 0.8rem;
			line-height: 0.8rem;
			box-shadow: 0 0 0.4rem #e1e1e1;
			border-radius: 0.2rem;
			margin-top: 0.1rem;
			.tfm-left{
				font-size: 0.24rem;
				span{
					font-size: 0.34rem;
					font-weight: bold;
					margin: 0 0.06rem;
				}
			}
			.tfm-right{
				font-size: 0.20rem;
				color: #d83604;
			}
		}
		.tf-price{
			display: flex;
			align-items: center;
			margin: 0 4%;
			padding: 4% 4%;
			width: 84%;
			box-shadow: 0 0 0.4rem #e1e1e1;
			border-radius: 0.2rem;
			margin-top: 0.2rem;
			color: #333;
			.tfp-item{
				flex: 0 0 50%;
				&:nth-of-type(1){
					position: relative;
					border-right: 0.01rem solid #e4e7ed;
				}
				p{
					font-size: 0.2rem;
					span{
						font-size: 0.4rem;
						font-weight: bold;
					}
				}
				label{
					font-size: 0.24rem;
					color: #666;
				}
				.tfpi-box{
					position: absolute;
					top: -0.4rem;
					left: 50%;
					width: 2rem;
					margin-left: -1rem;
					height: 0.3rem;
					border-radius: 0.3rem;
					box-shadow: 0 0 0.1rem #e1e1e1;
					p{
						font-size: 0.2rem;
						color: #d83604;
						font-weight: bold;
						border-radius: 0.3rem;
						background: #fff;
					}
					span{
						position: absolute;
						width: 0;
						height: 0;
						border-left: 5px solid transparent;
					    border-right: 5px solid transparent;
					    border-top: 5px solid #fff;
					}
				}
			}
		}
		.tf-echart{
			margin-top: 0.4rem;
		}
		.tf-ask{
			margin-top: 0.2rem;
			width: 100%;
			h1{
				width: 100%;
				height: 0.88rem;
				line-height: 0.88rem;
				font-size: 0.28rem;
				color: #999;
				background: #f5f5f5;
			}
			.tf-text{
				text-align: left;
			}
		}
	}
</style>